<template>
	<div class="left">
		<div class="global-visualization-box-head title">
			<span class="text">室外气象监测数据</span>
			<div class="footer-pan"></div>
		</div>
		<div class="chart">
			<div id="bottomtp-left"></div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import request from '@/common/request.js';
	import $config from '@/common/config.js';
	import moment from "moment";
	const domId = 'bottomtp-left';
	export default {
		data() {
			return {
				option: {
					title: {
						text: '单位：℃',
						textStyle: {
							color: '#fff',
							fontSize: 11,
						},
						top: '4px',
					},
					legend: {
						show: true,
						icon: 'rect',
						right: '20px',
						top: '4px',
						itemWidth: 20,
						itemHeight: 2,
						orient: 'horizontal',
						textStyle: {
							// color: colors.value,
							color: ['#FCE364', '#7CBBED'],
							fontSize: 12
						}
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 0,
											color: 'rgba(0, 255, 233,0)',
										},
										{
											offset: 0.5,
											color: 'rgba(255, 255, 255,1)',
										},
										{
											offset: 1,
											color: 'rgba(0, 255, 233,0)',
										},
									],
									global: false,
								},
							},
						},
					},
					grid: {
						// width: '92%',
						// top: '19%',
						// height: '70%',
						// left: '6%',
						// right: '6%',
						width: '99%',
						height: '80%',
						left: '1%',
						right: '1%',
						top: '21%',
						bottom: '4%',
						containLabel: true,
					},
					xAxis: [{
						type: 'category',
						axisLine: {
							show: false,
							color: '#fff',
						},

						axisLabel: {
							color: '#fff',
							width: 100,
						},
						splitLine: {
							show: false,
						},
						data: [],
					}, ],
					yAxis: [{
						type: 'value',
						min: 0,
						splitNumber: 4,
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255,255,255,.3)',
							},
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#fff',
								type: 'solid',
							},
						},
						axisLabel: {
							show: true,
							margin: 20,
							textStyle: {
								color: 'rgba(255,255,255)',
							},
						},
						axisTick: {
							show: true,
						},
					}, ],
					series: [
						{
							name: '温度',
							type: 'line',
							symbol: 'none',
							lineStyle: {
								// normal: {
									color: '#7CBBED',
								// },
							},
							label: {
								show: true,
								position: 'top',
								textStyle: {
									color: '#85C9FE',
									fontSize: 14,
									fontFamily: 'pieFont',
								},
							},
							itemStyle: {
								color: '#85C9FE',
								borderColor: 'rgb(105, 160, 204)',
								borderWidth: 2,
							},
							areaStyle: {
								// normal: {
									color: new echarts.graphic.LinearGradient(
										0,
										0,
										0,
										1,
										[{
												offset: 0,
												color: '#7CBBED',
											},
											{
												offset: 1,
												color: 'rgba(81,150,164,0)',
											},
										],
										false
									),
								// },
							},
							data: [], //data.values
						},
					],
				}
			}
		},
		methods: {
			loadData() {
				let that = this
				let params = {
					timeType: 'hour',
					startTime: moment().startOf("hour").add(-24, 'hours').format('YYYY-MM-DD HH:mm:ss'),
					endTime: moment().startOf("hour").format('YYYY-MM-DD HH:mm:ss'),
					configId: "env_out",
					mustEqual: true,
					projectId: $config.pcode
				}
				request.postRaw('/jeecgboot/device/data/logByConfig', {
					"content-type": "application/json"
				}, params).then(res => {
					console.log(res, '$$$$$$res111-----')
					if (!res.result) {
						that.option.xAxis[0].data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
							19, 20, 21, 22, 23, 24
						] //获取x轴的相关数据
						that.option.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
							0, 0, 0, 0
						] //获取y轴的相关数据
						let chartDom = document.getElementById("bottomtp-left");
						let echartInstance = echarts.init(chartDom);
						setTimeout(() => {
							echartInstance.setOption({
								...that.option
							})
						}, 500)
					} else {
						let myArrList = res.result?.range.map(item => {
							return item.substring(5)
						})
						// option.value.xAxis[0].data = res?.range  //获取x轴的相关数据
						that.option.xAxis[0].data = myArrList //获取x轴的相关数据
						//处理后端数据-----获取y轴温度部分相关数据
						let afterArrList = []
						res.result?.mdData.forEach(item => {
							afterArrList.push(item[item.length - 1])
						})
						let tempArrList = []
						afterArrList.forEach(item => {
							tempArrList.push(item.temp)
						})
						that.option.series[0].data = tempArrList //获取y轴的相关数据
						let chartDom = document.getElementById("bottomtp-left");
						let echartInstance = echarts.init(chartDom);
						setTimeout(() => {
							echartInstance.setOption({
								...that.option
							})
						}, 500)
					}
				})
			}
		},
		created() {
			this.loadData()
		},
		mounted() {
			this.$nextTick(() => {
				// let chartDom = document.getElementById(domId);
				// let echartInstance = echarts.init(chartDom);
				// console.log('chartDom==>>>', chartDom)
				// console.log('echartInstance==>>>', echartInstance)
				// echartInstance.setOption(this.option);
			});
		}
	}
</script>

<style lang="less" scoped>
	*{
		box-sizing: border-box;
	}
	.left {
		// padding:10px;
		padding:6px 10px 10px 10px;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 1px solid rgba(255, 255, 255, 0.3);
		background: linear-gradient(360deg, #0c1117 0%, rgba(7, 19, 36, 0) 100%);
		position: relative;

		&::before {
			position: absolute;
			top: -2px;
			left: -2px;
			width: 16px;
			height: 16px;
			border-top: 3px solid #76828f;
			border-left: 3px solid #76828f;
			content: '';
		}

		&::after {
			position: absolute;
			top: -2px;
			right: -2px;
			width: 16px;
			height: 16px;
			border-top: 3px solid #76828f;
			border-right: 3px solid #76828f;
			content: '';
		}

		.footer-pan {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;

			&::before {
				position: absolute;
				bottom: -2px;
				left: -2px;
				width: 16px;
				height: 16px;
				border-bottom: 3px solid #76828f;
				border-left: 3px solid #76828f;
				content: '';
			}

			&::after {
				position: absolute;
				bottom: -2px;
				right: -2px;
				width: 16px;
				height: 16px;
				border-bottom: 3px solid #76828f;
				border-right: 3px solid #76828f;
				content: '';
			}
		}

		.title {
			width: 100%;
			margin: 0;
		}

		.chart {
			height: calc(100% - 30px);
			width: 100%;

			#bottomtp-left {
				height: 100%;
			}
		}
	}
</style>